<template>
  <div class="container">
    <a-page-header
      :style="{
        background: '#fff',
      }"
      title="资源大全"
      sub-title="来自站长辛辛苦苦的探索结果"
    />
    <!-- 轮播图 -->
    <a-carousel :after-change="onChange" arrows effect="fade" ref="carouselRef">
      <template #prevArrow>
        <div class="custom-slick-arrow" style="left: 10px; z-index: 1">
          <left-outlined />
        </div>
      </template>
      <template #nextArrow>
        <div class="custom-slick-arrow" style="right: 10px">
          <right-outlined />
        </div>
      </template>
      <a-image
        width="100%"
        v-for="(item, index) of imgList"
        :preview="false"
        :key="index"
        :src="item"
        alt="轮播图"
      />
    </a-carousel>
    <a-card
      :tab-list="tabsList"
      :active-tab-key="activeKey"
      @tabChange="onTabChange"
    >
      <a-row :gutter="[12, 12]">
        <a-col
          :xs="24"
          :sm="24"
          :md="12"
          :lg="8"
          :xl="6"
          v-for="(i, index) of [1, 2, 3, 4, 5]"
          :key="index"
        >
          <a-card hoverable>
            <template #cover>
              <img
                alt="教程配图"
                height="160"
                src="https://upload-bbs.mihoyo.com/upload/2022/03/23/0dcb7326296b7abe7f2a0907e7c95690.jpeg"
              />
            </template>
            <a-card-meta title="诺艾尔生日快乐！">
              <template #description
                >bbs.mihoyo.com/ys/article/19308837</template
              >
            </a-card-meta>
          </a-card>
        </a-col>
      </a-row>
      <template #actions>
        <a-pagination
          size="small"
          v-model:current="current"
          :defaultPageSize="pageSize"
          :showSizeChanger="false"
          hideOnSinglePage
          :total="total"
          :show-total="(total) => `共${total}条`"
        />
      </template>
    </a-card>
  </div>
</template>

<script setup>
import { LeftOutlined, RightOutlined } from "@ant-design/icons-vue";
import { toRefs, reactive,ref,onMounted } from "vue";

const carouselRef = ref()

onMounted(()=>{
console.log(carouselRef.value)
  carouselRef.value.goTo(1,true)
})

let data = reactive({
  activeKey: "1",
  tabsList: [
    { key: "1", tab: "Html" },
    { key: "2", tab: "Css" },
    { key: "3", tab: "JavaScript" },
    { key: "4", tab: "NodeJs" },
  ],
  contentList: {
    1: "content1",
    2: "content1",
    3: "content2",
    4: "content3",
  },
  total: 100,
  current: 1,
  pageSize: 9,
});

let { activeKey, tabsList, contentList, total, current, pageSize } =
  toRefs(data);

let imgList = [
  "https://a.ideaopen.cn/Decade/t3CklrvH.jpg",
  "https://a.ideaopen.cn/Decade/anYKWsFl.jpg",
];

// 轮播图事件
function onChange(current) {
  console.log(current);
}

function onTabChange(key) {
  console.log(key);
  activeKey.value = key;
}
</script>

<style scoped>
.container {
  padding: 24px;
}
.ant-carousel :deep(.slick-slide) {
  max-height: 300px;
  overflow: hidden;
}
.ant-carousel :deep(.slick-arrow.custom-slick-arrow) {
  width: 30px;
  height: 30px;
  font-size: 30px;
  color: #fff;
  transition: all 0.6s;
  z-index: 1;
}
.ant-carousel :deep(.custom-slick-arrow:before) {
  display: none;
}
.ant-carousel :deep(.custom-slick-arrow:hover) {
  color: aqua;
}
.list-item {
  background: #ececec;
}
</style>